<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       .api-field-box .api-field-title{
            font-weight:900;
        }
       .api-field-box .form-group .col-md-8{
            margin: auto 0px;
        }

       form .form-control-plaintext:focus-visible{
           outline: unset !important;
       }
       textarea.form-control-plaintext{
           resize: none;
       }

       .form-control-plaintext{
           /* 溢出隐藏 */
               overflow: hidden;
           /* 文本溢出换成省略号 */
               text-overflow: ellipsis;
           /* 弹性盒子 */
               display: -webkit-box;
           /* 溢出到第几行 */
               -webkit-line-clamp: 2;
           /* 从上到下垂直排列子元素 */
               -webkit-box-orient: vertical;
       }

    </style>
    <script type="text/javascript">
        $(function () {

            //类型
            $("#apiField").on("change","#type",function () {
               var val = $(this).val();
               if(["byte","short","int","long"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                  $("#apiFieldValidator").find(".number,.enums").show();

               }else if(["float","double"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".number").show();

               }else if(["string"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".string,.enums").show();

               }else if(["boolean"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".enums").show();

               }else if(["date","time","timestamp"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".dateTime").show();

               }else if(["struct","array"].indexOf(val) >= 0){
                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
               }
            });
        })
    </script>

    <script type="text/javascript">
        $(function () {
            var data =   $("#apiFieldData").data("apiFieldData");
            var field = data.field;
            $("#apiField").deserializable(field);
            $("#apiFieldValidator").deserializable(field.validator);
            $("#apiField #type").trigger("change");
        });
    </script>
</head>
<body>
<div class="api-field-box">
    <div id="apiFieldData"></div>
    <h5 class="api-field-title">字段信息</h5>
    <form id="apiField" >

        <div class="form-group row">
            <label for="field" class="col-md-3 col-form-label">字段</label>
            <input type="text" readonly  class="form-control-plaintext col-md-8" id="field" name="field">
        </div>


        <div class="form-group row">
            <label for="name" class="col-md-3 col-form-label">名称</label>
            <input type="text" readonly  class="form-control-plaintext col-md-8" id="name" name="name">
        </div>


        <div class="form-group row">
            <label for="type" class="col-md-3 col-form-label">类型</label>
            <input type="text" readonly class="form-control-plaintext col-md-8" id="type" name="type">
        </div>

        <div class="form-group row">
            <label class="col-md-3 col-form-label">显示</label>
            <input type="text" readonly class="form-control-plaintext col-md-8"  id="visible" name="visible">
        </div>


        <div class="form-group row">
            <label for="remarks" class="col-md-3 col-form-label">备注</label>
            <textarea  readonly class="form-control-plaintext col-md-8" id="remarks" name="remarks"></textarea>
        </div>
    </form>

    <h5 class="api-field-title">校验信息</h5>
    <form id="apiFieldValidator">

        <div class="form-group row">
            <label  class="col-md-3 col-form-label">必填</label>
            <input type="text" readonly class="form-control-plaintext col-md-8"  id="required"  name="required" >
        </div>

        <div class="string">
            <div class="form-group row">
                <label for="minLength" class="col-md-3 col-form-label">最小长度</label>
                <input type="text"  readonly class="form-control-plaintext col-md-8" id="minLength" name="minLength">
            </div>


            <div class="form-group row">
                <label for="maxLength" class="col-md-3 col-form-label">最大长度</label>
                <input type="text"  readonly class="form-control-plaintext col-md-8" id="maxLength" name="maxLength">
            </div>
        </div>

        <div class="number">
            <div class="form-group row">
                <label for="min" class="col-md-3 col-form-label">最小值</label>
                <input type="text" readonly  class="form-control-plaintext col-md-8" id="min" name="min">
            </div>

            <div class="form-group row">
                <label for="min" class="col-md-3 col-form-label">最大值</label>
                <input type="text" readonly  class="form-control-plaintext col-md-8" id="max" name="max">
            </div>
        </div>


        <div class="dateTime">
            <div class="form-group row">
                <label for="datePattern" class="col-md-3 col-form-label">格式化</label>
                <input type="text" readonly  class="form-control-plaintext col-md-8" id="datePattern" name="datePattern">
            </div>
        </div>


        <div class="enums">
            <div class="form-group row">
                <label for="enums" class="col-md-3 col-form-label">字典</label>
                <textarea  readonly class="form-control-plaintext col-md-8" id="enums" name="enums"></textarea>
            </div>
        </div>


        <div class="form-group row">
            <label for="regex" class="col-md-3 col-form-label">正则</label>
            <textarea readonly class="form-control-plaintext col-md-8" id="regex" name="regex"></textarea>
        </div>


        <div class="form-group row">
            <label for="ognl" class="col-md-3 col-form-label">OGNL</label>
            <textarea readonly class="form-control-plaintext col-md-8" id="ognl" name="ognl"></textarea>
        </div>


        <div class="form-group row">
            <label for="errorMsg" class="col-md-3 col-form-label">提示</label>
            <textarea type="text" readonly  class="form-control-plaintext col-md-8" id="errorMsg" name="errorMsg"></textarea>
        </div>

    </form>
</div>

</body>
</html>